<template>
  <div :class="{'mobile-detail-wrap':showMobilePage}">
    <div v-loading="loading" class="create-invoice no-margin small-padding">
      <div>
        <Title title="交接信息" style="margin-bottom: 6px"/>
        <el-form :class="{'mobile-el-form': showMobilePage}" class="customer-form lineHeight32" label-position="right" label-width="85px">
          <el-row :gutter="8" type="flex" class="content">
            <el-col :span="8">
              <el-form-item label="交接人:" class="client-name">
                <span>{{ data.handoverName }}</span>
              </el-form-item>
              <el-form-item label="状态:" class="client-name">
                <span>{{ data.status ? '已完成' : '交接中' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="被交接人:" class="client-name">
                <span>{{ data.transfereeName }}</span>
              </el-form-item>
              <el-form-item label="交接时间:" class="client-name">
                <span>{{ data.transferTime | format('YYYY/MM/DD HH:mm') }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人:" class="client-name">
                <span>{{ data.creator }}</span>
              </el-form-item>
              <el-form-item label="交接编号:" class="client-name">
                <span>{{ data.sn }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <Title title="交接内容" style="margin: 24px 0 12px"/>
        <el-table
          ref="transfeTable"
          :data="handoverTableData"
          tooltip-effect="dark"
          style="width: 100%"
          border>
          <el-table-column label="模块" width="120" align="left">
            <template slot-scope="scope">{{ scope.row.module }}</template>
          </el-table-column>
          <el-table-column label="交接内容" align="left" min-width="200">
            <template slot-scope="scope">
              <span v-if="scope.row.businessType === 11 && !scope.row.contents.length">所有平台</span>
              <div v-else>
                <div
                  v-for="(item, index) in scope.row.contents"
                  :key="index">
                  <span class="field-name">{{ item.name }}:</span>
                  <span :class="item.num > 0 ? 'red-num' : ''">{{ item.num }}</span>
                  <div
                    v-if="scope.row.businessType !== 12 && item.ids && item.ids.length > 0 && scope.row.module !== '已删除'"
                    style="margin-left: 10px;"
                    class="button-text"
                    @click="openOrderDialog(item, scope.row)">查看明细</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="交接角色" min-width="180">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.roles" :key="index">{{ item.label }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="交接说明" width="350px"/>
        </el-table>
      </div>
      <fixed-pagination>
        <div class="center">
          <el-button type="primary" class="submit-btn" size="small" @click="toBack()">返回</el-button>
        </div>
      </fixed-pagination>
      <detailList ref="detailList" :head-data="headData"/>
    </div>
  </div>
</template>
<script>
import Title from '@/components/Title';
import detailList from '../components/detailList';
import { tableData } from '../data';
import { format } from '@/filters/date';
import { getHandoverDetail } from '@/api/handover';
import { getProcessManagement } from '@/api/legal';
import { mapState } from 'vuex';

export default {
  components: { Title, detailList },
  filters: { format },
  data() {
    return {
      tableData,
      data: {
        handoverId: '',
        byTransferId: ''
      },
      loading: false,
      id: '',
      handoverTableData: [],
      dialogVisible: false,
      // orderData: [],
      customFlowData: [],
      headData: []
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
    this.id = this.$route.params.id;
    // this.getCustomFlow();
    this.getData();
  },
  methods: {
    async getCustomFlow() {
      this.tableLoading = true;
      const { data } = await getProcessManagement({ type: 1 });
      this.tableLoading = false;
      this.customFlowData = this.flatTree(data);
    },
    flatTree(treeData) {
      let res = [];
      treeData.forEach(item => {
        if (item.children) {
          item.children = item.children.filter(ele => {
            if (ele.isCustom) {
              ele.headData = [
                { label: '流水号', property: 'sn' },
                { label: '创建人', property: 'contractName' },
                { label: '创建时间', property: 'createTime', type: 'minute' }
              ];
              return ele;
            }
          });
          res = res.concat(item.children);
        }
      });
      return res;
    },
    toBack() {
      if (this.$route.query.fromTodo) {
        this.$router.go(-1);
      } else {
        this.$router.push({ name: 'userHandover' });
      }
    },
    async getData() {
      this.loading = true;
      await this.getCustomFlow();
      const res = await getHandoverDetail(this.id);
      this.data = res.data;
      const handoverData = res.data.handOverRecordDetails;
      const tempRoles = [
        { value: 0, label: '创建人' },
        { value: 1, label: '审批人' }
      ];
      const tempTransferContent = [
        { status: 5, name: '待提交' },
        { status: 1, name: '审批中' }
      ];
      for (let j = 0; j < handoverData.length; j++) {
        if (handoverData[j].businessType === 15) {
          // 自定义审批
          const tempModule = this.customFlowData.filter(item => {
            return item.formId === handoverData[j].formId;
          });
          handoverData[j].customModuleId = tempModule.length > 0 ? tempModule[0].id : '';
          handoverData[j].module = tempModule.length > 0 ? tempModule[0].name : '已删除';
          handoverData[j].remark = '转交创建人和审批人';
          // 处理交接内容
          handoverData[j].contents = handoverData[j].contents.map(ele => {
            const temp = tempTransferContent.filter(cur => {
              return cur.status === ele.status;
            });
            if (temp.length > 0) {
              ele.name = temp[0].name;
            }
            return ele;
          });
          // 处理交接角色
          handoverData[j].roles = tempRoles.filter(cur => {
            return handoverData[j].roleIds.includes(cur.value);
          });
          continue;
        }
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].businessType === handoverData[j].businessType) {
            handoverData[j].module = this.tableData[i].module;
            handoverData[j].remark = this.tableData[i].remark;
            // 处理交接内容
            for (let m = 0; m < this.tableData[i].transferContent.length; m++) {
              for (let n = 0; n < handoverData[j].contents.length; n++) {
                if (this.tableData[i].transferContent[m].status === handoverData[j].contents[n].status) {
                  const curItem = [this.tableData[i].transferContent[m], handoverData[j].contents[n]];
                  const obj = Object.assign({}, ...curItem);
                  handoverData[j].contents[n] = obj;
                  break;
                }
              }
            }
            // 处理交接角色
            handoverData[j].roles = this.tableData[i].roles.filter(cur => {
              return handoverData[j].roleIds.includes(cur.value);
            });
            break;
          }
        }
      }
      this.handoverTableData = handoverData;
      this.loading = false;
    },
    openOrderDialog(val, row) {
      this.dialogVisible = true;
      this.headData = this.getHeadData(row.businessType);
      this.$refs.detailList.initData(val, row, false, true);
    },
    getHeadData(type) {
      // 自定义表单
      if (type === 15) {
        return [
          { label: '流水号', property: 'sn' },
          { label: '创建人', property: 'creator' },
          { label: '创建时间', property: 'createTime', type: 'minute', millisecond: true }
        ];
      }
      const temp = this.tableData.filter(item => {
        return item.businessType === type;
      });
      return temp[0].headData || [];
    },
    handleClose() {
      this.dialogVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.create-invoice {
  margin: 16px;
  background-color: #fff;
  padding: 16px 24px 50px;
  min-height: calc(100vh - 100px);
}
span{
  font-size: 14px;
}
.field-name{
	color: #999;
}
.red-num{
  color: #FF4E5F;
}
.el-form{
  &::v-deep {
    .el-form-item{
      margin-bottom: 0;
    }
    .el-form-item__label{
      color: #999;
    }
    .el-col{
      border-right: 1px solid #EBEEFD;
    }
  }
}
.mobile-el-form {
  .el-row {
    flex-wrap: wrap;
  }
}
</style>
